import React from 'react';
import axios from 'axios';
import {withRouter} from "react-router-dom";  // 要使用编程式导航把withRouter引入把类组件传入那么在类中就可以通过this.props得到一些包装好的数据
import {Form} from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';
import './login.css';

class Login extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      uname: '',
      pwd: ''
    }
  }

  handleSubmit = () => {
    const {history} = this.props;
    axios.post('users/login',{
      uname: this.state.uname,
      pwd: this.state.pwd
    }).then(result=>{
      // console.log(data.data)
      if(result.meta.status === 200) {
        // 存储token
        localStorage.setItem('mytoken', result.data.token);
        localStorage.setItem('uid', result.data.uid);
        // 登录成功
        history.push('/home');
      }
    });
  }

  handleChange = (event) => {
    // 从原生DOM中获取属性：name 和 value
    const {name,value} = event.target;
    this.setState({
      [name]: value
    });
  }

  render() { //受控组件加入状态 value={uname}和事件onChange={this.handleChange}这种点标记语法Form.Button体现了高内聚点击按钮触发的就是表单的onSubmit事件调用了handleSubmit方法
    const {uname,pwd} = this.state;
    return (
      <div className='login-container'>
        <div className='login-title'>登录</div>
        <div className="login-form">  
          <Form onSubmit={this.handleSubmit}> 
            <Form.Input 
              icon='user' 
              required 
              size='big' 
              iconPosition='left' 
              name='uname'
              value={uname}
              onChange={this.handleChange}
              placeholder='请输入用户名...' 
            />
            <Form.Input 
              type='password' 
              icon='lock' 
              required 
              size='big' 
              iconPosition='left' 
              name='pwd'
              value={pwd}
              onChange={this.handleChange}
              placeholder='请输入密码...' 
            />
            <Form.Button positive content='登录' />
          </Form> 
        </div>
      </div>
    );
  }
}

export default withRouter(Login);
